<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="d" uri="http://dgg.net/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>贷款客户评分测试</title>
    <style>
        .wrapper{
            height: calc(100vh - 100px);
        }
    </style>
    <c:import url="header_evaluating.jsp"/>
</head>
<body>
<header class="customer-header">
   <%-- <h3><a href=""><i class="iconfont icon-xiangzuo-copy"></i></a></span> 贷款客户评分测试</h3>--%>
       <div class="base-topic-bg"><img src="${rootUrl}/static/evaluating/images/icon_rate.png"/></div>
</header>
<div class="wrapper">
<form action="" id="topic">
    <p class="base-topic-explain">基础信息:(基础分值${baseScore}分）</p>
    <div class="base-topic">
        <c:forEach items="${subjectOptionsDtos}" var="key">
        <div class="topic-item subject" data-id="${key.subjectId}">
            <h4 class="subject_name">${key.subjectName}</h4>
            <ul class="topic-item-list">
                <c:if test="${key.subjectType==1}">
                    <c:forEach items="${key.optionsList}" var="options">
                        <li>
                            <label>
                                <input type="radio" name="options_${key.subjectId}"data-code="${options.optionsCode}" data-score="${options.optionsScore}" data-type="${options.optionsScoreType}" value="${options.optionsId}"><i></i>
                                <span>${options.optionsName}</span>
                            </label>
                        </li>
                    </c:forEach>
                </c:if>
                <c:if test="${key.subjectType==2}">
                    <c:forEach items="${key.optionsList}" var="options">
                        <li><label><input type="checkbox" name="options_${key.subjectId}" data-code="${options.optionsCode}" data-score="${options.optionsScore}" data-type="${options.optionsScoreType}" value="${options.optionsId}"><i></i>
                            <span>${options.optionsName}</span>
                        </label></li>
                    </c:forEach>
                </c:if>
            </ul>
        </div>
        </c:forEach>
    </div>
</form>
</div>
<c:if test="${!empty subjectOptionsDtos}">
    <button type="button" class="submit-topic btn-class" id="submit">提交评测</button>
</c:if>
<c:import url="footer_evaluating.jsp"/>
<%--<script src="https://unpkg.com/better-scroll/dist/bscroll.min.js"></script>--%>
<script  src="${rootUrl}/static/evaluating/js/bscroll.min.js"></script>
<script>
    $(function () {
        setFontSize(375);
        var wrapper = document.querySelector('.wrapper');
        var scroll = new BScroll(wrapper);
        var scroll = new BScroll('.wrapper',{
            scrollY: true,
            startX: 0,
            click: true
        })
        window.alert = function (name) {
            const iframe = document.createElement('IFRAME');
            iframe.style.display = 'none';
            // iframe.setAttribute('src', 'data:text/plain,');
            document.documentElement.appendChild(iframe);
            window.frames[0].window.alert(name);
            iframe.parentNode.removeChild(iframe);
        }
        let index = $('.topic-item-list').length;
        $('.topic-item-list li').each(function(){
            var isActive=$(this).find('input').prop("checked");
            if(isActive){
                $(this).addClass('active')
            }
        })
        $('.topic-item-list input').change(function () {
            var isChange=$(this).prop("checked");
            var isRaido=$(this).attr("type");
            if(isRaido=="radio") {
                $(this).parents('ul').find('li').removeClass('active');
                $(this).parents('li').addClass('active');
                return;
            }
            if(isChange) {
                $(this).parents('li').addClass('active');
            }else {
                $(this).parents('li').removeClass('active');
            }
        });
        $('#submit').on("touchstart",function () {
            //有多少道题目
            var subListSize = $(".topic-item-list").length;
            //选项选中个数是否与与题目相等
            var optionsSize = 0;
            $(".topic-item-list").each(function () {
                $(this).find("li").each(function () {
                    if($(this).attr("class")=='active'){
                        optionsSize++;
                        return false;
                    }
                });
            });
            if(subListSize != optionsSize){
                alert('所有选项为必选项！');
            }else{
                var dataArr = [];
                $(".subject").each(function () {
                    var sujectJson = {};
                    var subjectId = $(this).data("id");
                    sujectJson.subjectId = subjectId;
                    sujectJson.subjectName = $(this).find(".subject_name").text();
                    var optionsArr = [];
                    $("[name='options_"+subjectId+"']:checked").each(function () {
                        var optionsJson = {};
                        optionsJson.optionsScore = $(this).attr("data-score");
                        optionsJson.optionsScoreType = $(this).attr("data-type");
                        optionsJson.optionsCode = $(this).attr("data-code");
                        optionsJson.optionsName = $(this).parent().find("span").text();
                        optionsJson.optionsId = $(this).val();
                        optionsArr.push(optionsJson);
                    });

                    sujectJson.optionsList = optionsArr;
                    dataArr.push(sujectJson);
                });
                $("#submit").removeClass("btn-class");
                $.ajax({
                    url: sysInfo.basePath + '/api/evaluating/submit_paper_subject.do',
                    type:'post',
                    data:{submitJson:JSON.stringify(dataArr),baseScore:'${baseScore}',paperId:'${paperId}'},
                    dataType:'json',
                    success:function(data){
                        $("#submit").addClass("btn-class");
                        if(data.code == 0){
                            var key = data.data;
                            window.location.href = sysInfo.basePath+"/api/evaluating/customer_score.html?key="+key;
                        }else{
                            alert("评测失败")
                        }
                    }
                });
            }
        })
    })

</script>
</body>
</html>